<template>
  <div class="box">
    <el-container>
      <el-header class="head">
        <div class="folt">
          <div class="docmes">
            <el-tooltip class="item" effect="dark" content="全屏" placement="top-start">
            <i class="el-icon-rank" aria-hidden="true " @click="aray"></i>
            </el-tooltip>
            
          </div>
          <div class="block">
            <el-avatar :size="50"><img src="@/assets/images/err.jpg" alt=""></el-avatar>
          </div>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              {{ allFrom.company }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <div class="tecl" @click="project">项目地址</div>
              <div class="tecl" @click="close">登出</div>
            </el-dropdown-menu>
          </el-dropdown>

        </div>
      </el-header>
      <el-container>
        <el-aside :width="lieshis ? '60px' : '200px'">
          <div class="slop" @click="hanele">|||</div>
          <el-menu
            :collapse="lieshis"
            :collapse-transition="false"
            background-color="#6088fa"
            text-color="#fff"
            active-text-color="#ffd04b"
            :default-active="utlsa"
            :router="true"
          >
            <el-menu-item
              @click="menu(item.path)"
              v-for="item in router"
              :key="item.username"
              :index="item.path"
            >
            <i :class="item.children[0].meta.icon"></i>
              <span slot="title">{{ item.children[0].meta.title }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
        <router-view />
        </el-main>
      </el-container>
    </el-container>
    <!-- 退出弹框提示 -->
    <el-dialog title="退出" :visible.sync="dialogVisible" width="30%">
      <span>是否确认退出</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getItem, setItem, removeItem } from "../utils/token";
export default {
  // 组件名称
  name: "",
  // 组件参数 接收来自父组件的数据
  props: {
    path: {},
  },
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      dialogVisible: false,
      lieshis: false,
      allFrom: [],
      routers:'',
      urls: "",
      utlsa: "",
      arry:false,
      usespath: [],
    };
  },
  // 计算属性
  computed: {
    router() {
      const routes = this.$router.options.routes.slice(4);
      return routes;
    },
  },
  // 侦听器
  watch: {},
  created() {
    this.utlsa = "/home";
    if (this.$route.path == getItem("url")) {
      this.utlsa = getItem("url") + "";
    }
  },
  // 组件方法
  methods: {
    // 出现确认框
    close() {
      this.dialogVisible = true;
    },
    // 退出登录
    dialog() {
      removeItem("token");
      // removeItemtime('timeKey')
      this.$router.push("/login");
      removeItem("url");
    },
    // 菜单高亮
    menu(url) {
      this.utlsa = url;
      setItem("url", url);
    },
    // 控制菜单伸缩
    hanele() {
      this.lieshis = !this.lieshis;
    },
    // 项目地址跳转
    project(){
      const aTag = document.createElement('a')
      aTag.href = "https://gitee.com/kuxiao-smile/node-nest"
      aTag.target = '_blank'
      aTag.click()
    },
    // 全屏/退出全屏
    aray(){
      if(!this.arry){
        document.documentElement.requestFullscreen()
        this.arry=true;
      }else{
        document.exitFullscreen()
        this.arry=false;
      }
    }
  },
  //操纵DOM元素写这里
  mounted() {},
};
</script> 

<style scoped lang="less">
.box {
  height: 100% !important;
}

.el-menu {
  border: 0px;
}
.el-container {
  height: 100vh;
  background-color: #6088fa;
}

.folt {
  width: 100px;
  margin-right: 30px;
  display: flex;
  align-items: center;
}
.el-icon-rank{
  margin-right: 20px;
}

.el-main {
  height: 100%;
  padding: 10px;
  background-color: #eee;
}

.head {
  padding: 0px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.el-avatar {
  margin-right: 20px;
  height: 40px !important;
  width: 40px !important;
}
.tecl {
  height: 20px;
  width: 80px;
  font-size: 14px;
  text-align: center;
  margin-bottom: 10px;
}
.el-icon-location:hover {
  color: #6088fa;
}
.el-aside {
  overflow: hidden;
}

.slop {
  text-align: center;
  letter-spacing: 5px;
  background-color: #3061e7;
  cursor: pointer;
}
/deep/.el-submenu__icon-arrow {
  display: none !important;
}
.docmes{
  display: flex;
  vertical-align: middle;
  display: inline-block;
}

</style>